Changing Telerik skins

Several iParts throughout the product use Rad Controls developed by Telerik. These controls require a few steps to style, and Telerik resources can help you get started:

■    Telerik Control Guide – an overview of Telerik controls, including available skins.

■    Telerik Visual Style Builder – generates CSS and some images for skinning Telerik controls.

Every [theme].skin file lists all of the Telerik skins that it uses to style controls. If a control does not explicitly define a theme, then it uses the Default Telerik skin.

Rad Window control

This control is the pop-up window that we see in many iParts. Its skin is set by two lines in Aspen.skin:

<asiweb:Window runat="server" Skin="Forest" />

<asiweb:WindowManager runat="server" Skin="Forest" />

Forest is a skin designed by Telerik and is available on most Telerik controls, along with a handful of other Skins. You can preview available Telerik skins for this control.

Tip: Telerik skins are easy to switch out and virtually maintenance-free. However, they are difficult to customize, so avoid this route unless you can use the skins as-is.

Rad Tab Strip

This control is used by the Content Collection Organizer (CCO) iPart, the Contact Address Editor iPart, and most other places where you see a tab strip. This line defines the  skin:

<telerik:RadTabStrip runat="server" Skin="Aspen" EnableEmbeddedSkins="false" />

The definition for this look and feel is near the bottom of the 99-[theme].css, under the heading RadTools Styles.

Rad Menu control

This control displays the primary navigation area. There is wrapper for this control called PageNavR, so this line defines the  skin:

<asi:PageNavR runat="server" Skin="Aspen" EnableEmbeddedSkins="false" />

The styling for the Rad Menu is located in Menu.[theme].css, and the image sprite is under [theme]\Menu\rmSprite.png. The easiest way to customize this control is to use Telerik’s Visual Style Builder. (Tip: This tool works best in Internet Explorer.)